<!--  -->
<template>
  <div class='content' style="background-color: black;height: 100vh">
    <el-menu default-active="1-1" :default-openeds="['1', '1']" style="height: 100%;overflow-x: hidden"
      background-color="#2f4156" text-color="#fff" active-text-color="#ffd04b" :collapse-transition="false"
      :unique-opened="true" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
      <div style="height: 10%;display: flex;background-color: #2f4156;color: #fff">
        <div style="margin: auto">
          <img src="../../assets/logo.png" style="height: 20px;width: 20px">
          <span v-if="!isCollapse">陈新亮的后台系统</span>
        </div>
      </div>
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i>{{ !isCollapse ? "导航一" : "" }}</template>
        <el-menu-item index="1-1" @click="selection('1-1')">用户管理</el-menu-item>
        <el-menu-item index="1-2" @click="selection('1-2')">成绩管理</el-menu-item>
        <el-submenu index="1-3">
          <template slot="title">任务管理</template>
          <el-menu-item index="1-3-1" @click="selection('1-3-1')">添加任务模板</el-menu-item>
          <el-menu-item index="1-3-2" @click="selection('1-3-2')">查询任务列表</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-menu"></i>{{ !isCollapse ? "关于" : "" }}</template>
        <el-menu-item-group>
          <el-menu-item index="2-1" @click="selection('2-1')">关于版本</el-menu-item>
          <el-menu-item index="2-2" @click="selection('2-2')">关于系统</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title"><i class="el-icon-setting"></i>{{ !isCollapse ? "系统管理" : "" }}</template>
        <el-menu-item index="3-1">系统信息</el-menu-item>
          <el-menu-item index="3-2">系统版本</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  name: 'assindeCom',
  props: {
    isCollapse: {
      type: Boolean,
      default: false
    }
  },
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    return {

    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    selection(val) {
      let path = "/"
      console.log(this.$route);
      switch (val) {
        case '1-1': path = "/user"; break;
        case '2-1': path = "/about/version"; break;
        default: path="/error";
      }
      if (this.$route.path === path) return
      this.$router.push({ path })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() { }, //生命周期 - 创建之前
  beforeMount() { }, //生命周期 - 挂载之前
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() { }, //生命周期 - 销毁完成
  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
/* @import url(); 引入公共css类 */
</style>